<template>
	<view class="houseInfo">
		<nav-bars backState="1000" :bgColor="background" fontColor="#000" title="房源详情"></nav-bars>
		<view class="topBox">
			<view class="topImgBox">
				<swiper :indicator-dots="false" :autoplay="true" :circular="true" :interval="3000"
					:duration="1500" @change='imgBannerChange'>
					<swiper-item class="imgBox" v-for="(item,index) in houseInfo.photo_array" :key="index" @click="toViewImg(index)">
						<image :src="item.PHOTO_ADDR"></image>
					</swiper-item>
				</swiper>
				<view class="ViewDot">
					<view class="ViewDotItem">{{imgIndex+1}}/{{houseInfo.photo_array.length}}</view>
				</view>
			</view>
			<view class="titBox">
				<text class="title">{{houseInfo.sale_subject}}</text>
				<view class="address">
					<text class="iconfont iconhuaban4"></text>
					{{houseInfo.region_name+houseInfo.section_name}}
				</view>
				<view class="price">
					<view class="item item1">
						<view class="priceNum">{{houseInfo.sale_unit_price}}<text>/m²</text></view>
						均价
					</view>
					<view class="border"></view>
					<view class="item">
						<view class="priceNum">{{houseInfo.sale_total_price}}<text>万元</text></view>
						总价
					</view>
				</view>
			</view>
		</view>
		
		<!-- 楼盘情况 -->
		<view class="houseDetail">
			<text class="title">楼盘情况</text>
			<view class="tagBox">
				<text v-for="(item,index) in houseInfo.tag_ids" :key="index">{{item}}</text>
			</view>
			<view class="info">
				<view class="item">
					<view class="left">
						<text>装修情况</text><view class="infoTxt omit-1">{{houseInfo.sale_fitment}}</view>
					</view>
					<view class="right">
						<text>建筑面积</text><view class="infoTxt omit-1">{{houseInfo.sale_area}}m²</view>
					</view>
				</view>
				<!-- <view class="item">
					<view class="left">
						<text>产权年限</text><view class="infoTxt omit-1">毛坯毛坯毛坯毛坯毛坯毛坯</view>
					</view>
					<view class="right">
						<text>容积率</text><view class="infoTxt omit-1">136m²</view>
					</view>
				</view> -->
				<view class="item">
					<view class="left">
						<text>物业类型</text><view class="infoTxt omit-1">{{houseInfo.sale_useage?houseInfo.sale_useage:''}}</view>
					</view>
					<view class="right">
						<text>规划户数</text><view class="infoTxt omit-1">{{houseInfo.sale_doors?houseInfo.sale_doors:''}}</view>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text>物业费</text><view class="infoTxt omit-1">{{houseInfo.sale_property?houseInfo.sale_property:''}}</view>
					</view>
					<view class="right">
						<text>车位数</text><view class="infoTxt omit-1">{{houseInfo.garage_amount?houseInfo.garage_amount:''}}</view>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text>规划面积</text><view class="infoTxt omit-1">{{houseInfo.garden_area?houseInfo.garden_area:''}}</view>
					</view>
					<view class="right">
						<text>开盘时间</text><view class="infoTxt omit-1">{{houseInfo.sale_year?houseInfo.sale_year:''}}</view>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<text>绿化率</text><view class="infoTxt omit-1">{{houseInfo.garden_area?houseInfo.garden_area:''}}</view>
					</view>
					<view class="right">
						<text>交房时间</text><view class="infoTxt omit-1">{{houseInfo.sale_leave_time?houseInfo.sale_leave_time:''}}</view>
					</view>
				</view>
			<!-- 	<view class="item1">
					<text>物业公司</text><view class="infoTxt1 omit-1">{{houseInfo.garden_area}}</view>
				</view>
				<view class="item1">
					<text>开发商</text><view class="infoTxt1 omit-1">{{houseInfo.garden_area}}</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import service_houseJLB from '@/service/houseJLB.js'
	export default{
		data(){
			return{
				background:'#f8f8f8',
				imgIndex:0,
				sale_no:'',
				houseInfo:{}
			}
		},
		onLoad(options) {
			this.$utils.getUrl()
			this.sale_no = options.sale_no
			this.getHouseDetail()
		},
		methods:{
			// 获取房源详情
			getHouseDetail(){
				service_houseJLB.getHouseDetail({sale_no:this.sale_no}).then(res=>{
					console.log(res,'房源详情')
					if(res.code==1){
						res.data.tag_ids =res.data.tag_ids?res.data.tag_ids.split('|'):[]
						this.houseInfo = res.data?res.data:{}
					}
				})
			},
			
			// 图片的banner
			imgBannerChange(e) {
				this.imgIndex = e.detail.current
			},
			// 图片预览
			toViewImg(index) { //type=1施工播报，type=2施工图纸
				let imgArr = this.houseInfo.photo_array
				let urlType = Array.isArray(imgArr)
				console.log(imgArr,'需要预览的图片')
				let imgUrl = []
				if (urlType) {
					imgArr.map(item => {
						imgUrl.push(item.PHOTO_ADDR)
					})
				} else {
					imgUrl.push(imgArr.PHOTO_ADDR)
				}
				uni.previewImage({
					current: index, //预览图片的下标
					urls: imgUrl //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.houseInfo{
		padding: 0 30rpx;
		.topBox{
			margin: 20rpx 0;
			background-color: #fff;
			border-radius: 20rpx;
			box-shadow: 0px 2rpx 14rpx 0px #F1F1F1;
			.topImgBox{
				border-radius: 20rpx 20rpx 0px 0px;
				width: 690rpx;
				overflow: hidden;
				height: 500rpx;
				position: relative;
				.imgBox{
					overflow: hidden;
					// border-radius: 20rpx 20rpx 0px 0px;
				}
				.ViewDot {
					position: absolute;
					bottom: 20rpx;
					right: 32rpx;
					padding: 6rpx 24rpx;
					background: rgba(0,0,0,.5);
					border-radius: 22rpx;
					font-family: PingFang SC;
				
					.ViewDotItem {
						font-size: 22rpx;
						font-weight: 500;
						color: #fff;
					}
				}
			}
			.titBox{
				padding: 30rpx;
				.title{
					font: bold 40rpx/64rpx PingFang SC;
					color: #333;
				}
				.address{
					.iconfont{font-size: 26rpx;}
					font: 500 26rpx/54rpx PingFang SC;
					color: #999999;
				}
				.price{
					margin-top: 53rpx;
					display: flex;
					align-items: center;
					justify-content: space-around;
					.item{
						display: flex;
						flex-direction: column;
						align-items: center;
						font: bold 30rpx/39rpx PingFang SC;
						.priceNum{
							font: bold 56rpx/64rpx PingFang SC;
							color: #F66036;
							margin-bottom: 10rpx;
							text{
								font: bold 30rpx/39rpx PingFang SC;
							}
						}
					}
					.border{
						width: 0rpx;
						display: inline-block;
						height: 102rpx;
						border: 1rpx solid #999;
						// height: 100%;
					}
				}
			}
		}
		
		// 楼盘情况
		.houseDetail{
			margin-bottom: 20rpx;
			padding: 40rpx 30rpx;
			background-color: #fff;
			border-radius: 20rpx;
			box-shadow: 0px 2rpx 14rpx 0px #F1F1F1;
			.title{
				font: bold 36rpx/64rpx PingFang SC;
				color: #333;
			}
			.tagBox{
				text{
					padding: 6rpx 7rpx;
					background-color: #F4EBDC;
					border-radius: 3rpx;
					color: #AE8C6C;
					margin-right: 10rpx;
					font: 500 22rpx/64rpx PingFang SC;
				}
			}
			.info{
				.item{
					display: flex;
					font: bold 22rpx/42rpx PingFang SC;
					color: #343532;
					.left{width: 50%;display: flex;align-items: center;}
					.right{width: 50%;display: flex;align-items: center;}
					text{
						width: 88rpx;
						margin-right: 18rpx;
						color: #999;
					}
					.infoTxt{
						width: 195rpx;
					}
				}
				.item1{
					display: flex;
					font: bold 22rpx/42rpx PingFang SC;
					color: #343532;
				}
				text{
					width: 88rpx;
					margin-right: 18rpx;
					color: #999;
				}
				.infoTxt{
					width: 385rpx;
				}
			}
		}
	}
</style>
